<script setup lang="ts">
  import { ref } from 'vue'
  import { takeCareList } from '@/api/training'
  import { hideLoading, showLoading } from '@/utils/tools'
  const projectInfoList = ref([])
  const paging = ref()
  const loadFun = (pageNo:number, pageSize:number) => {
    takeCareList({pageNo,pageSize}).then(res => {
      if(res.code == 200){
        const dataList = JSON.parse(JSON.stringify(res.data.data))
        paging.value.complete(dataList)
      }else{
        paging.value.complete([])
      }
    }).catch(err => {
      paging.value.complete(false)
    })
  }
  const collapseClick = (data:any) => {
    data.collapse = !data.collapse
  }

  const OpenPdf = (url:string) => {
    showLoading('加载文件中...')
    uni.downloadFile({
      url: url,
      success: (res) => {
        var filePath = res.tempFilePath as string;
        uni.openDocument({
          filePath:filePath,
          showMenu:true,
          success:(res:any) => {
            hideLoading()
          },
          fail:(err) => {
            hideLoading()
          }
        })
      },
    });
  }
</script>

<template>
  <z-paging ref="paging" class="z-paging" v-model="projectInfoList" @query="loadFun">
    <template #top>
      <xx-title title="注意事项"/>
    </template>
    <view class="sign-collapse" v-for="(item,index) in projectInfoList" :key="index">
      <view class="collapse-header" @click="collapseClick(item)" :style="{borderBottom:!item.collapse ? 'none' :'1rpx solid #F5F5F5'}">
        <view class="collapse-title">
          <view class="name">{{ item.name }}</view>
        </view>
        <view class="collapse-icon" :class="{collapse:item.collapse}">
          <up-icon name="arrow-left" size="14"></up-icon>
        </view>
      </view>
      <view class="collapse-body" :class="{collapse:item.collapse}">
        <block v-if="item.manualFile && item.manualFile.length > 0">
          <view class="collapse-item" v-for="(items,inx) in item.manualFile" :key="inx">
            <view class="collapse-info">
              <view class="collapse-name" @click="OpenPdf(items.fullUrl)">{{items.name}}</view>
            </view>
          </view>
        </block>
        <up-empty style="padding: 20rpx 0" v-else width="80px" height="80px" text="暂无文件" textColor="#515462" :icon="`${$Prefix}/public/images/smallImage/emty.png`"/>
      </view>
    </view>
  </z-paging>
</template>

<style scoped lang="scss">
  ::v-deep.z-paging-content{
    background: #F5F5F5;
  }
  .sign-collapse{
    margin: 32rpx;
    background-color: #FFFFFF;
    border-radius: 16rpx;
    padding: 0 32rpx;
    .collapse-header{
      padding: 24rpx 0;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .collapse-title{
        display: flex;
        align-items: center;
        font-size: 32rpx;
        .name{
          color: #21252E;
          margin-right: 10rpx;
          font-weight: 500;
        }
        .static{
          border-radius: 8rpx;
          padding: 4rpx 12rpx;
          font-size: 20rpx;
          color: #0DC56E;
          background: rgba(0, 178, 89, 0.1);
          box-sizing: border-box;
          border: 1px solid #0DC56E;
        }
        .danger{
          color: #fd1515;
          background: rgba(178, 42, 0, 0.1);
          border: 1px solid #fd1515;
        }
      }
      .collapse-icon{
        transition: all .3s;
        &.collapse{
          transform: rotate(-90deg);
        }
      }
    }
    .collapse-body{
      border-bottom: 1px solid #F5F5F5;
      height: 0;
      transition: all .3s;
      overflow: hidden;
      &:last-child{
        border-bottom: none;
      }
      &.collapse{
        height: auto;
      }
      .collapse-item{
        padding: 24rpx 0;
        display: flex;
        width: 100%;
        align-items: center;
        justify-content: center;
        border-bottom: 1rpx solid #F5F5F5;
        &:last-child{
          border-bottom: 0;
        }
        .collapse-info{
          width: 100%;
          .collapse-name{
            color: #3c71ec;
            font-size: 28rpx;
            font-weight: 500;
            margin-bottom: 4rpx;
          }
        }
        .collapse-text{
          text-align: right;
          width: 120rpx;
          font-size: 24rpx;
        }
      }
    }
  }
  .valid-date-code{
    padding: 30rpx;
    .code-header{
      font-size: 32rpx;
      font-weight: 500;
      display: flex;
      justify-content: space-between;
      align-items: center;
      color:#333333;
      padding-bottom: 16rpx;
      border-bottom: 1rpx solid #EBEBEB;
    }
    .code-body{
      height: 800rpx;
      padding:1rpx;
      overflow-y: auto;
      .motion-item{
        text-align: center;
        display: inline-block;
        padding: 10rpx 0;
        margin: 10rpx 20rpx 10rpx 0;
        font-size: 24rpx;
        width: 180rpx;
        border-radius: 8rpx;
        background-color: #EFF1F3;
        &:last-child{
          margin-right: 0;
        }
        &.check{
          background-color: #3086FE;
          color: #FFFFFF;
        }
      }
    }
  }
  .bottom-fixed{
    padding-top: 14px;
    .seizeASeat{
      height: 68rpx;
    }
  }
  .project-btn{
    width: 100%;
    position: absolute;
    box-sizing: border-box;
    left: 0;
    bottom: 0;
    padding-left: 28rpx;
    padding-right: 28rpx;
    border-top: 1px solid #F1F2F4;
    padding-top: 14rpx;
    background-color: #FFFFFF;
    .personal-registration{
      background: #92C75B;
      color: #FFFFFF;
      border-radius: 16rpx;
      width:100%;
      padding: 16rpx 0;
      letter-spacing: 2rpx;
      font-weight: 500;
      text-align: center;
      &.disabled{
        background-color: #E5E5E5;
        color:#818496;
      }
    }
  }
  .no-sure{
    color: #818496;
    font-size: 28rpx;
    text-align: center;
  }

</style>
